import React from "react"
import { Route } from "react-router-dom"
import News from "../News"  //导入子路由
import Index from "../Index"
//导入css文件
import './index.css'
import HoseList from "../List"
import Profile from "../Profile"
import { TabBar } from 'antd-mobile'   //导入TabBar



//TabBar数据
const tabItems = [{
    title: '首页',
    icon: 'icon-ind',
    path: '/home'
},
{
    title: '找房',
    icon: 'icon-findHouse',
    path: '/home/list'
},
{
    title: '资讯',
    icon: 'icon-infom',
    path: '/home/news'
},
{
    title: '我的',
    icon: 'icon-my',
    path: '/home/profile'
}]

export default class Home extends React.Component {
    //初始化数据
    state = {
        selectedTab: this.props.location.pathname, //默认选择项
    };
    componentDidUpdate(prevProps) {
        // 在这里就能判断路由是否进行了切换，路由的信息保存在props属性里面
        // 如果当前的路由信息不等于上一次的，那么就代表发生了路由切换
        if (prevProps.location.pathname !== this.props.location.pathname) {   //解决tab高亮bug
            this.setState({ selectedTab: this.props.location.pathname })
        }
    }
    //渲染TabBar.Item
    renderTabBarItem() {
        return tabItems.map(item => <TabBar.Item
            title={item.title}
            key={item.title}
            icon={
                <i className={`iconfont ${item.icon}`}></i>
            }
            selectedIcon={< i className={`iconfont ${item.icon}`} />
            }
            selected={this.state.selectedTab === item.path}
            onPress={() => {
                this.setState({
                    selectedTab: item.path,
                });
                // 切换路由
                this.props.history.push(item.path)
            }}

        >
        </TabBar.Item >)

    }
    // 渲染UI结构
    render() {
        return (
            <div className="home">
                {/* 渲染子路由 */}
                <Route path="/home/news" component={News} />
                <Route exact path="/home" component={Index} />
                <Route path="/home/list" component={HoseList} />
                <Route path="/home/profile" component={Profile} />
                {/* TabBar区域 */}
                <TabBar noRenderContent={true} tintColor="#21b97a" barTintColor="white">
                    {/* Item区域 */}
                    {this.renderTabBarItem()}
                </TabBar>
            </div>

        )
    }
}



